<template>
  <div class="comparseMenu">
    <!--头部菜单 -->
    <a-menu class="menuWrapper"
            v-model="current"
            mode="horizontal">
      <a-menu-item key="menu1"
                   @click="menuClick"> 曲线对比 </a-menu-item>
      <a-menu-item key="menu2"
                   @click="menuClick"> AQI占比 </a-menu-item>
      <a-menu-item key="menu3"
                   @click="menuClick"> 同比环比 </a-menu-item>
    </a-menu>
    <!-- body -->
    <div class="bodyWrapper"
         id="bodyWrapperId">
      <!-- 表格搜索数据 -->
      <CompareTable class="minWidth paddlr24"
                    :pageName="current[0]"
                    :columns="columns"
                    :dataTable="data"
                    :tableSearch="tableSearch"
                    @getDataTable="getDataTable"
                    @getSelectChange="getSelectChange" />
      <SlotV />

      <!-- 曲线对比 -->
      <Curve class="minWidth paddlr24"
             v-show="pageName == 'menu1'"
             :paramsObject="paramsObject" />

      <!-- AQI占比 -->
      <AQI class="minWidth paddlr24"
           v-show="pageName == 'menu2'"
           :paramsObject="paramsObject" />

      <!-- 同比环比 -->
      <Year class="minWidth paddlr24"
            v-show="pageName == 'menu3'"
            :paramsObject="paramsObject" />
    </div>
  </div>
</template>

<script>
import Com from '../.././common/js/com.js'
import CompareTable from './children/compareTable.vue'
import Curve from './curve.vue'
import AQI from './AQI.vue'
import Year from './year.vue'
import SlotV from './slot.vue'
export default {
  props: ['tableData'],
  data () {
    return {
      current: ['menu1'],
      pageName: 'menu1',
      columns: [], // 表格数据
      data: [], // 表格数据
      selectedRows: [], /* 选中此处可配置默认列 */
      paramsObject: {},
      tableSearch: ''
    }
  },
  mounted () {
    this.columns = Com.columns // 表头
    this.getDataTable() // 加载表格数据
    this.$nextTick(() => {
      const pageName = window.sessionStorage.getItem('pageName')
      if (pageName) {
        this.current[0] = pageName
        this.pageName = pageName
      } else {
        this.current[0] = 'menu1'
      }
    })
  },
  methods: {
    getDataTable: function (val) { // 加载表格数据
      if (val) {
        this.data = val
      } else {
        this.data = this.tableData
      }
    },
    getSelectChange: function (data) { /* 表格-选中的数据 */
      this.selectedRows = data
      this.paramsObject = {
        selectedRows: this.selectedRows
      }
    },
    menuClick: function (item, key, keyPath) {
      window.sessionStorage.setItem('pageName', item.key)
    }
  },
  watch: {
    current: function () {
      // document.getElementById('bodyWrapperId').scrollTop = 0 // 切换菜单默认滚动条位置
      this.pageName = this.current[0]
      // this.getDataTable() // 加载表格数据
    },
    tableData: function () {
      this.data = this.tableData
    }
  },
  components: {
    CompareTable,
    Curve,
    AQI,
    Year,
    SlotV
  }
}
</script>

<style lang="less" scoped>
/* 头部菜单 */
.ant-menu {
  line-height: 0.64rem;
  padding: 0 0.08rem;
  font-size: 0.16rem;
  color: rgba(0, 0, 0, 0.65);
  @media (max-width: 1024px) {
    line-height: 31px;
  }
}
.ant-menu-item,
.ant-menu-submenu-title {
  padding: 0;
  margin: 0 0.24rem;
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: #437ede;
  border-bottom: 2px solid #437ede;
}
.comparseMenu {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.menuWrapper {
  flex: 0 0 0.64rem;
  @media (max-width: 1024px) {
    min-height: 32px;
  }
}
.bodyWrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 0.24rem 0;
  flex: 1;
  overflow: auto;
  // padding: 0.24rem;
  // height: calc(100% - 0.64rem);
  // @media (max-width: 1024px) {
  //  height: calc(100% - 38px);
  // }
}
</style>
